<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" @click="goBack"></i>
      <p>全部明细</p>
    </header>
    <ul class="detail">
      <li v-for="item in detail">
        <div class="detail-left">
          <div class="detail-type">
            <p>{{ item.transactionType|typeFilter }}</p>
          </div>
          <div class="time">
            <p>{{ item.recordTime }}</p>
          </div>
        </div>
        <div class="detail-right">
          <i class="fa fa-plus" v-if="item.transactionType==0"></i>
          <i class="fa fa-minus" v-if="item.transactionType!=0"></i>
          <p>{{ item.AmountofMoney|numFilter }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "WalletDetail",
  data(){
    return{
      user:{},
      detail:[]
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
    this.queryDetail();
  },
  filters: {
    typeFilter(value) {
     if(value==0){
       return '充值';
     }
     else if(value==1){
       return '提现';
     }
     else{
       return '支付';
     }
    },
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
  methods:{
    //回退事件
    goBack(){
      this.$router.go(-1);
    },
    queryDetail(){
      //TODO
      this.$axios.get('queryWalletTransaction', {
        params: {
          userID: this.user.userId,
        }
      }).then(response => {
        this.detail = response.data;
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}

.wrapper header{
  display: flex;
  align-items: center;

  margin-top: 4vw;
}

.wrapper header .fa-angle-left{
  font-size: 5vw;
  font-weight: 500;

  margin-left: 2vw;
}

.wrapper header p{
  font-size: 4vw;
  font-weight: 600;

  margin-left: 4vw;
}

.wrapper .detail{
  margin-top: 5vw;
}

.wrapper .detail li{
  display: flex;
  align-items: center;

  justify-content: space-between;
  margin: 2vw 2vw 0 2vw;
  padding-bottom: 3vw;

  border-bottom: solid 1px #eae8e8;
}

.wrapper .detail li .detail-left .detail-type p{
  font-size: 3.5vw;
}

.wrapper .detail li .detail-left .time p{
  font-size: 2vw;
  color: #9c9c9c;

  margin-top: 2vw;
}

.wrapper .detail li .detail-right{
  display: flex;
  align-items: center;

  font-size: 4vw;
  font-weight: 600;
  color: red;
}

.wrapper .detail li .detail-right .fa-plus{
  font-weight: 300;
  font-size: 3vw;

  margin-top: .7vw;
  margin-right: .5vw;
}

.wrapper .detail li .detail-right .fa-minus{
  font-weight: 300;
  font-size: 3vw;

  margin-top: .7vw;
  margin-right: .5vw;
}
</style>